<template>
	<view class="template-details tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000"
			@change="cardSwiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item image-banner">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>

		<view class="">
			<tn-subsection :list="list" mode="button" disabled="false" :borderRadius="50" animationType="cubic-bezier"
				@change="changeTop"></tn-subsection>
		</view>

		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="margin-top: 1%;">

			</view>
			<view class="tn-flex  tn-flex-col-between" style="margin-top: 2%;">
				<view class="justify-content-item tn-flex tn-flex-col-center">
					<text class="tn-blogger-content__count-icon tn-color-purplered"
						style="font-size: 40rpx; margin-left: 50rpx;">{{res.title}}</text>
					<text class="tn-padding-right-sm tn-text-bold tn-color-purplered"
						style="font-size: 24rpx; margin-left: 20rpx;">(￥{{ res.price }})</text>
					<text class="tn-padding-right-sm tn-text-bold tn-color-purplered"
						style="font-size: 24rpx; margin-left: 20rpx;">({{ res.orderId }})</text>
				</view>
			</view>

			<view class="">
				<view class="tn-tag-content tn-margin tn-text-justify">
					<view class="tn-flex  tn-flex-col-between" style="margin-top: 2%;">
						<view
							class="justify-content-item tn-tag-content__item   tn-text-sm tn-text-bold tn-bg-cyan--light tn-color-cyan">
							<text class="tn-tag-content__item--prefix" v-if="index!=0">#</text> {{ res.tag }}
						</view>
						<view
							class="justify-content-item tn-tag-content__item tn-text-sm tn-text-bold tn-bg-grey--light tn-color-grey"
							style="margin-left: 3%;">
							<text class="tn-tag-content__item--prefix">#</text>
							{{ res.createTime }}
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>

		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					卖方信息
				</view>
			</view>
		</view>
		<view class="content-backgroup tn-margin">
			<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="margin-top: 1%;">
				<!-- <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
				  {{ item.desc }}
				</text> -->
				<view class="justify-content-item tn-flex tn-flex-col-center tn-text-bold">
					<tn-avatar class="" shape="circle" :src="res.avatar" size="sm">
					</tn-avatar>
					&nbsp; &nbsp; &nbsp;
					<text class="tn-color-gray">{{ res.nickName }}</text>
				</view>
				<view class="justify-content-item tn-flex tn-flex-col-center">
					<tn-button open-type="contact">联系对方 ></tn-button>
				</view>

			</view>
		</view>

		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>

		<view class="tn-margin" v-if="topChangeNum == 1">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					快递信息
				</view>
			</view>
		</view>

		<view class="content-backgroup tn-margin" v-if="topChangeNum == 1">

			<view class="king-list tn-margin-top-sm">
				<block v-for="(item,index) in postInfo.result.list">
					<view class="king-icon">
						<text
							class='tn-icon-creative tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
						<text class='tn-text-xl tn-margin-left'>{{item.time}}</text>
					</view>
					<view class='king-item tn-color-red tn-icon-circle-fill'>
						<view class="resume2">
							<text class="">
								{{item.status}}
							</text>
						</view>

					</view>
				</block>
			</view>
		</view>

		<view class="tn-flex tn-flex-row-between tn-footerfixed" v-if="res.state == 1">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="40%" shadow fontBold style="margin-left: 10upx;"
					@click="cancelOrder()">
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">取 消 订 单</text>
				</tn-button>
			</view>
		</view>

		<view class="tn-flex tn-flex-row-between tn-footerfixed" v-if="res.state == 2">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="red" padding="40rpx 0" width="40%" shadow fontBold
					@click="backGoods()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">申 请 退 款</text>
				</tn-button>
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="40%" shadow fontBold style="margin-left: 10upx;"
					@click="successGoods()">
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">确 认 收 货</text>
				</tn-button>
			</view>
		</view>

		<view class="tn-flex tn-flex-row-between tn-footerfixed" v-if="res.state == 3">
			<view class="tn-flex-2 justify-content-item tn-margin-xs tn-text-center">
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold
					@click="confSuccess()">
					<text class="tn-icon-flag-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">完 成 订 单</text>
				</tn-button>
			</view>
		</view>


		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import request from '@/common/request.js'
	import showImg from '@/orderPages/showImgUpload.vue'

	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		components: {
			showImg
		},
		data() {
			return {
				res: "",
				content: {},
				list: ['订单', '快递信息'],
				swiperList: [],
				newPrice: 0,
				topChangeNum: 0,
				showImg: {
					takeFileList: [],
					successFileList: [],
					showUploadList: true,
					customBtn: false,
					autoUpload: false,
					showProgress: false,
					deleteable: false,
					customStyle: false,
					disabled: false,
				},
				postInfo: ''
			}
		},
		onLoad: function(option) {
			this.res = JSON.parse(decodeURIComponent(option.info))
		},
		mounted() {
			this.loadData();
		},
		methods: {
			loadData() {
				let good = this.res;
				if (good.mainImage != null) {
					let imgs = good.mainImage.split(",")
					for (let z = 0; z < imgs.length; z++) {
						let temp = {};
						temp.type = 'image';
						temp.url = request.getBaseUrl() + imgs[z];
						this.swiperList.push(temp);
					}
				}
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			getRandomCoolBg() {
				return this.$t.colorUtils.getRandomCoolBgClass()
			},
			//取消订单
			cancelOrder() {
				let goods = this.res;
				uni.showModal({
					title: '提示：',
					content: "确认取消订单吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/goods/deleteOrder", goods).then((res) => {
								uni.reLaunch({
									url: '/discoveryPages/myGoodsOrder'
								});
							});

						}
					}
				});
			},
			//确认收货
			successGoods() {
				let goods = this.res;
				uni.showModal({
					title: '提示：',
					content: "确认收货吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/goods/successGoods", goods).then((res) => {
								uni.reLaunch({
									url: '/discoveryPages/myGoodsOrder'
								});
							});
			
						}
					}
				});
			},
			//申请退款
			backGoods() {
				let goods = this.res;
				uni.showModal({
					title: '提示：',
					content: "确认申请退款吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/goods/backGoods", goods).then((res) => {
								uni.reLaunch({
									url: '/discoveryPages/myGoodsOrder'
								});
							});
			
						}
					}
				});
			},
			//完成订单
			confSuccess() {
				let goods = this.res;
				uni.showModal({
					title: '提示：',
					content: "确认完成订单吗？",
					success: function(res) {
						if (res.confirm) {
							request.post("/order/goods/confSuccess", goods).then((res) => {
								uni.reLaunch({
									url: '/discoveryPages/myGoodsOrder'
								});
							});
			
						}
					}
				});
			},
			changeTop(data) {
				this.topChangeNum = data.index;
				//切换至物流信息 查询快递
				if (data.index == 1 && this.postInfo == '') {
					request.post("/xxc/order/getPostInfo", this.res).then((res) => {
						console.log(res);
						this.postInfo = JSON.parse(res.msg)
					});
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	.template-product {}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 内容图 start */
	.content-backgroup {
		z-index: -1;

		.backgroud-image {
			border-radius: 15rpx;
			width: 100%;
		}
	}

	/* 内容图 end */

	/* 商家商品 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 10rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #E83A30;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 24rpx;
			padding-right: 5rpx;
		}
	}

	.image-book {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-picbook {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 15rpx 15rpx 0 0;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 750rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 主图固定 */
	.beibei {
		width: 100%;
		height: 1000upx;
	}

	.beibei2 {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		position: relative;
		background-position: center center;
		background-size: cover;
	}

	/* 相册 */
	.slideshow {
		top: 0;
		position: absolute;
		width: 100vw;
		height: 1000upx;
		overflow: hidden;
	}

	.slideshow-image {
		position: absolute;
		width: 100%;
		height: 100%;
		background: no-repeat 50% 50%;
		background-size: cover;
		-webkit-animation-name: kenburns;
		animation-name: kenburns;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-duration: 16s;
		animation-duration: 16s;
		opacity: 1;
		transform: scale(1.2);
	}

	.slideshow-image:nth-child(1) {
		-webkit-animation-name: kenburns-1;
		animation-name: kenburns-1;
		z-index: 3;
	}

	.slideshow-image:nth-child(2) {
		-webkit-animation-name: kenburns-2;
		animation-name: kenburns-2;
		z-index: 2;
	}

	.slideshow-image:nth-child(3) {
		-webkit-animation-name: kenburns-3;
		animation-name: kenburns-3;
		z-index: 1;
	}

	.slideshow-image:nth-child(4) {
		-webkit-animation-name: kenburns-4;
		animation-name: kenburns-4;
		z-index: 0;
	}

	@-webkit-keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	@keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}


	/* 简历内容 */
	.king-list {
		display: block;
		background-color: #ffffff;
	}

	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}


	/* 名片微调 */
	.img-solid {
		border: 2rpx solid #eee;
	}

	.share-img {
		position: fixed;
		/* padding: 10rpx; */
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
		border: 6rpx solid rgba(255, 255, 255, 0);
	}

	.resume {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
		margin: 20rpx 0;
		border-radius: 8rpx;
	}



	// .button-no {
	//   border: none;
	//   width: 100%;
	//   height: 100%;
	//   background-color: rgba(0, 0, 0, 0);
	// }


	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 0rpx 20rpx 25rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	.see {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}
</style>